<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>组件的几个注意点</title>

    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>

    <!-- 
       几个注意点
        一：关于组件名
                一个单词组成：
                        第一种写法(首字母小写)：school
                        第二种写法(首字母大写):School
                多个单词组成：
                        第一种写法(kebab-case命名)：my-school
                        第二种写法(CamelCase命名):MySchool（需要Vue脚手架支持）
                备注：
                    一：组件名尽可能回避HTML中已有的元素名称：例如，h2,H2都不行。
                    二：可以使用 name配置项指定组件在开发者工具中呈现的名字。
        二：关于组件标签
                第一种写法：<school></school>
                第二种写法: <school/>
                备注：不使用脚手架时， <school/>会导致后续组件不能渲染。
        三：一个简写方式：
                const school = Vue.extend(options) 可简写为 const school = options
     -->

    <!-- 准备好一个容器 -->
    <div id="root">

        <!-- 第三步 编写组件标签 -->
       <school></school>
        <hr/>
        <my-school></my-school>

    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false // 阻止 vue在启动时生成生产提示    

        // 第一步 创建组件
        /* const school = Vue.extend({
            template:`
                <div>
                    <h2>学校名称:{{schoolName}}</h2>
                    <h2>学校地址:{{address}}</h2>    
                </div>
            `,
            data(){
                return{
                    schoolName:'宋营小学',
                    address:'河南省商丘市睢阳区路河乡'
                }
            }
        }) */
        // 第一步 创建组件 简写形式
        const school = {
            name:'name配置项 school',
            template:`
                <div>
                    <h2>学校名称:{{schoolName}}</h2>
                    <h2>学校地址:{{address}}</h2>    
                </div>
            `,
            data(){
                return{
                    schoolName:'宋营小学',
                    address:'河南省商丘市睢阳区路河乡'
                }
            }
        }

        new Vue({
            el:'#root',
            // 第二步 注册组件
            components: {
                school:school,
                'my-school':school,
            }
        })
        
    </script>


</body>

</html>